<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多重变换</title>
  <style>
    .outer {
      width: 200px;
      height: 200px;
      border: 2px solid black;
      margin: 0 auto;
      margin-top: 100px;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: deepskyblue;
      /* 前后顺序不一样 就会发生 改变 */
      /*transform: scale(0.5) translate(100px,100px);*/
      /*transform: translate(100px,100px) rotate(30deg);*/
      /*发生旋转后坐标轴会发生改变 所以做好最后写旋转*/
      transform:rotate(30deg) translate(100px,100px);
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="son">你好啊</div>
</div>
</body>
</html>